<template>
  <div class="footer">
    <ul style="margin-top: 0px">
      <i class="footer-title">名站推荐:</i>
      <i :span="2" v-for="site in footerSite" :key="site.title">
        <a :href="site.href" style="text-decoration: none; margin-left: 10px">
          <b>
            <font :color="setColor()" class="footer-site">{{site.title}}</font>
          </b>
        </a>
      </i>
    </ul>
    <center><p style="margin-top: 20px; font-size:small; color:#bacac6">
      <a
        href="http://beian.miit.gov.cn"
        rel="nofollow"
        target="_blank"
        style="text-decoration: none;color:#bacac6"
      >备案号：京ICP备20017228号-1</a>
      <br />Copyright ©
      <a
        href="http://www.dongrp.club"
        target="_blank"
        style="text-decoration: none;color:#bacac6;"
      >www.dongrp.club</a>
    </p></center>
  </div>
</template>
<script>
export default {
  data() {
    return {
      footerSite: [
        { title: "菜鸟教程", href: "https://www.runoob.com" },
        { title: "SVG编辑器", href: "http://www.zuohaotu.com/svg/" },
        { title: "步知公考", href: "http://g.buzhi.com/lesson/s_30?ac=&k=1" },
        { title: "哔哩哔哩", href: "https://www.bilibili.com/" },
        { title: "中国传统色", href: "https://www.sojson.com/web/cj.html" }
      ],
      colors: [
        "#ffc64b",
        "#c93756",
        "#9ed900",
        "#177cb0",
        "#75878a",
        "#21a675",
        "#ff3300",
        "#7bcfa6",
        "#cca4e3",
        "#2e4e7e",
        "#f2ecde"
      ]
    };
  },
  methods: {
    setColor() {
      var num = Math.floor(Math.random() * this.colors.length);
      return this.colors[num];
    }
  }
};
</script>